<!--
 * @Descripttion: 图片预览组件
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 17:31:34
 * @LastEditTime: 2022-01-11 13:27:10
-->
<template>
  <!--大图-->
  <Modal v-model="showModal" title="" :footer-hide="true" class="preview-modal" width="100%">
    <div class="box" @click="hide" v-if="showModal">
     <div class="artical">
       <h2><span> </span>{{editorInfo.articleTitle}}</h2>
      
       <div class="imgBox" v-if="editorInfo.fileUrl">
         <img :src="editorInfo.fileUrl" alt="">
       </div>
        <div class="videoBox"  v-if="editorInfo.videoUrl">
          <video controls="controls" :src="editorInfo.videoUrl" >
            您的浏览器不支持 video 标签
          </video>         
        </div>
         <div class="content"  style="white-space: pre-wrap;word-wrap: break-word;">{{editorInfo.newArticleContent}}</div>
      </div>
    </div>
  </Modal>
</template>
<script>
  export default {
    name: 'preview',
    props: ['editorInfo'],
    data() {
      return {
        showModal: false,
      }
    },

  
    methods: {
      show() {
        this.showModal = true
      },
     
      hide() {
        this.showModal = false
      },
    },
  }
</script>
<style lang="scss" scoped>
 .artical{
    width:375px;
    background: #fff;
    margin:0 auto;
    padding:20px;
    max-height: 80%;
    overflow-y:auto ;
    img,video{
      max-width: 100%;
      margin-top:15px;
    }
    h2{
      font-size:18px;
      span{
        display:inline-block;
        width:3px;
        height: 20px;
        background:#2d8cf0;
        margin-right:5px;
        vertical-align: -2px;
      }
      line-height: 20px;
    }
    .content{
      margin:10px 0;
    }
  }
  .preview-modal {
    ::v-deep .ivu-modal {
      width: 100%;
      height: 100%;
      top: 0;
    }

    ::v-deep .ivu-modal {
      position: fixed;

      .ivu-modal-close {
        z-index: 99999;

        .ivu-icon-ios-close {
          font-size: 50px;
          font-weight: bolder;
          color: #fff;
        }
      }
    }

    ::v-deep .ivu-modal-content {
      width: 100%;
      height: 100%;
      background: rgba(51, 51, 51, 0);
      box-shadow: 0 0 0 rgb(0, 0, 0);
    }

    ::v-deep .ivu-modal-body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .large-img {
      z-index: 999;
      position: absolute;
      cursor: pointer;
      margin: auto;
      max-height: 100%;
      max-width: 100%;
    }

    .operate-icon {
      z-index: 999;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 100px;
      width: 400px;
      border-radius: 10px;
      text-align: center;
      background-color: rgba(51, 51, 51, 0.6);
    }

    .left-icon {
      transform: rotateY(180deg)
    }
  }

 .videoBox{
   max-width: 100%;
 }
</style>